<template>
	<NavBar :height="50">
		<view class="navber"></view>
	</NavBar>
	<view>
		<view class="header">
			<uni-data-select v-model="city" :localdata="cityRange" @change="changeCity"
				:clear="false"></uni-data-select>
			<uni-search-bar :focus="false" placeholder="请输入搜索内容" v-model="searchValue"
				cancelButton="none"></uni-search-bar>
			<button type="primary" size="mini">搜索</button>
		</view>
		<view class="main">
			<view class="flag">
				<view :class="['title', { active: activeIndex === 1, inactive: activeIndex !== 1 }]"
					@click="changeBorderStyle(1)">热映</view>
				<hr />
				<view :class="['title', { active: activeIndex === 2, inactive: activeIndex !== 2 }]"
					@click="changeBorderStyle(2)">影院</view>
			</view>
			<view class="content">
				<uni-card class="wellReceivedCard" v-if="activeIndex === 1">
					<view class="wellReceived">
						<image class="cover" type="image" src="../../static/logo.png" alt="" />
						<view class="info">
							<view class="title">哪吒之魔童闹海</view>
							<view class="score">评分 9.8</view>
							<view class="star">主演：吕艳婷，瀚墨，囧森瑟夫</view>
							<view class="projectionInfo">今天73家影院放映1745场</view>
						</view>
						<view class="buyTicket" @click="buyTicket">购票</view>
					</view>
				</uni-card>
				<uni-card :is-shadow="false" v-else>
					<view class="cinema">
						<view class="singleRow">
							<view class="moive_name">百丽宫影城（恒隆广场店）</view>
							<view class="price">
								<view class="price_num">37.9</view>
								<view class="price_unit">元起</view>
							</view>
						</view>
						<view class="singleRow">
							<view class="moive_address">历下区泉城路188号恒隆广场东翼6层</view>
							<view class="distance">300m</view>
						</view>
						<view class="tagsBox">
							<uni-tag :inverted="true" text="签" type="primary" />
							<uni-tag :inverted="true" text="标签" type="primary" />
							<uni-tag :inverted="true" text="标签" type="primary" />
						</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import NavBar from "../../components/cusNavBar.vue";

	//地区
	const city = ref(1);
	let cityRange = reactive([{
			value: 0,
			text: "济南"
		},
		{
			value: 1,
			text: "青岛"
		},
		{
			value: 2,
			text: "日照"
		}
	]);

	function changeCity(e) {
		console.log("e:", e);
	};

	//搜索框
	const searchValue = ref("");
	//展示内容
	const activeIndex = ref(1);
	const changeBorderStyle = (index) => {
		activeIndex.value = index;
	};

	//购票
	function buyTicket(e) {
		console.log("跳转购票窗口");
		uni.navigateTo({
			url: "/pages/movie/buyTicket",

		})
	}
</script>

<style lang="scss" scoped>
	.navber {
		height: 100%;
		background-color: #ff2a63;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		background-color: #ccab24;

		.uni-data-select {
			background-color: #ccc;
		}

		.uniui-bottom::before {
			color: #000 !important;
		}

		.uni-stat__select {
			flex: none;
			width: 66px;
		}

		.uni-stat__select {
			height: 35px;
		}

		.uni-stat-box {
			width: 62px;
		}

		.uni-searchbar {
			width: 200px;
		}
	}

	.main {

		// background-color: #000;
		.flag {
			height: 35px;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: center;
			font-size: 16px;
			font-weight: 700;
			border-bottom: 1px solid #ccc;

			.title {
				width: 49%;
				height: 100%;
				text-align: center;
				line-height: 35px;
			}

			hr {
				height: 20px;
				border: 1px solid #ccc;
			}

			.active {
				color: red;
			}

			.inactive {
				color: #000;
			}
		}

		.content {

			.uni-card {
				margin: 5px !important;
				padding: 0px !important;
			}

			.cinema {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 80px;

				.singleRow {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.moive_name {
						font-size: 16px;
						color: #000;
					}

					.price {
						// background-color: red;
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						align-items: end;

						.price_num {
							color: #cc2d45;
							font-size: 20px;
						}

						.price_unit {
							font-size: 10px;
							margin-bottom: -2px;
						}
					}

					.moive_address {
						font-size: 14px;
					}

					.distance {
						font-size: 14px;
					}
				}

				.tagsBox {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-direction: row;
					overflow-y: auto;

					.uni-tag {
						margin-right: 5px;
					}
				}
			}

			.wellReceivedCard {
				:deep(.uni-card__content) {
					padding: 5px !important;
				}
			}

			.wellReceived {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.cover {
					height: 100px;
					width: 20%;
				}

				.info {
					.title {
						font-size: 18px;
						color: #000;
					}

					.star {
						color: #595959;
					}
				}

				.buyTicket {
					height: 30px;
					width: 20%;
					border-radius: 10px;
					text-align: center;
					line-height: 30px;
					background-color: red;
					color: #fff;
					font-weight: 600;
				}
			}
		}
	}
</style>